<template>
  <div>
    <el-table 
      :data="tableList.dataList" 
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column 
        v-for="item in tableList.titleList"
        :label="item.titleName"
        :prop="item.titleProp"
        :fixed="(item.titleProp == 'houseNum' || item.titleProp == 'multiplier')  ? true : false"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getReportList, exportReport } from "@/api/settle";

const searchParams = reactive({
  // 报表类型，1-电量报表，2-水量报表，3-气量报表
  reportType: 2,
  timeType: 1,
  paramTime: '',
  houseIdList: [],
  projectId: null,
  varType: "waterFreezeValue",
  startDate: '',
  endDate: '',
})

const loading = ref(false)

const getList = () => {
  loading.value = true
  getReportList(searchParams)
  .then((res) => {
    loading.value = false
    tableList.titleList = res.data.titleList;
    tableList.dataList = res.data.dataList;
  })
  .catch((err: any) => {
    loading.value = false
    console.error("err", err.msg);
  });
};

const exportParams = () => {
  exportReport(searchParams)
}

const tableList = reactive({
  titleList: [] as any,
  dataList: [] as any,
})

defineExpose({ getList, searchParams, exportParams })
</script>

<style lang="scss" scoped>

</style>